<template>
	<view class="mid-ellipsis">
		<view class="left-text">
			<text>{{ props.text }}</text>
		</view>
		<view class="right-text">{{ props.text }}</view>
	</view>
</template>

<script setup lang="ts">
const props = defineProps({
	text: {
		type: String,
		default: ""
	}
})
</script>

<style lang="stylus" scoped>
.mid-ellipsis
	width: 100%;
	position: relative;
	letter-spacing: 1px;
	.left-text
		width: 55%;
		text-overflow: ellipsis;
		overflow: hidden;
		text
			white-space: nowrap;
	.right-text
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		top: 0;
		direction: rtl;
		width: 50%;
		right: 0;
</style>